<template>
	<view>
		<view class="a">
			<u-swiper :list="list1" circular></u-swiper>
		</view>
		<view class="b">
			<u--text text="任务中心" class="c"></u--text>
			<u-collapse>
				<u-collapse-item :title="item.title" :name="item.id" v-for="item in taskList" :key="item.id">
					<u-cell v-for="it in item.paperItems">
						<view slot="title" class="u-slot-wrap">
							<text>{{it.examPaperName}}</text>
							<u-tag v-if="it.status==2" text="完成" plain size="mini" type='success'></u-tag>
							<u-tag v-else-if="it.status==1" text="待批改..." plain size="mini" type='warning'></u-tag>
						</view>
					</u-cell>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="b">
			<u--text text="固定试卷" class="c"></u--text>
			<view class="d">
				<view class="page" v-for="item in add1.fixedPaper" :key="item.id">
					<image src="/static/icon/试卷.png" mode="" style="width: 130rpx;height: 150rpx;"></image>
					<view class="" style="font-size: 15rpx;width: 100rpx;">{{item.name}}</view>
					<view class="" style="color: #66B1FF;font-size:20rpx;" @click="goToAnswer(item.id)">开始答题</view>
				</view>
			</view>
		</view>
		<view class="b">
			<u--text text="时段试卷" class="c"></u--text>
			<view class="d">
				<view class="page1" v-for="item in add1.timeLimitPaper" :key="item.id">
					<image src="/static/icon/时段.png" mode="" style="width: 150rpx;height: 170rpx;"></image>
					<view class="" style="font-size: 20rpx;">{{item.name}}</view>
					<view class="" style="font-size: 10rpx;">{{item.endTime}}</view>
					<view class="" style="font-size: 10rpx;">{{item.startTime}}</view>
					<view class="" style="color: #66B1FF;font-size:20rpx;height: 50rpx;" @click="goToAnswer(item.id)">开始答题</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import http from '../../http.js'
	export default {
		data() {
			return {
				list1: [
					"https://tse3-mm.cn.bing.net/th/id/OIP-C.VCcgAcUd3Xv7HszQm8ZaJQHaEK?w=331&h=186&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3",
					"",
					"https://tse2-mm.cn.bing.net/th/id/OIP-C.wopbF1urpyk_qrmh4bj0VgHaEK?w=298&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3",
				],
				taskList: [],
				add1: [
					{
						id:'',
						name: "", //试卷名称
						limitStartTime: null, //考试开始时间
						limitEndTime: null, //考试结束时间
					},
					{
						endTime:'',
						id:'',
						name:'',
						startTime:''
					}
				]
			}
		},
		onLoad() {
			this.add()
		},
		methods: {
			add() {
				http({
					url: '/api/student/dashboard/task',
					method: 'post'
				}).then(res => {
					console.log(res);
					if (res.code === 1) {
						this.taskList = res.response
					}
				})
				http({
					url: '/api/student/dashboard/index',
					method: 'post',
				}).then(res => {
					console.log(res);
					if (res.code === 1) {
						this.add1 =res.response
					}
				})
			},
			 goToAnswer(id) {
			    // 拼接参数（假设答题页面路径为/pages/exam/answer）
			    uni.navigateTo({
			      url: `/pages/studentpage/kaoshi?id=id` // 使用?拼接参数，而非?+id
			    });
			  },
		}
	};
</script>

<style lang="scss">
	.a {
		width: 100%;
	}

	.c {
		background-color: #F7F7F7;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 25rpx;
	}

	.u-slot-wrap {
		display: flex;
		justify-content: space-between;
	}
	.page{
		width: 220rpx;
		height: 330rpx;
		// background-color: red;
		border: 1rpx solid #ECEEF5;
		margin: 12rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items:center;
		flex-direction:column;
		text-align: center;
	}
	.d{
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.page1{
		width: 220rpx;
		height: 400rpx;
		// background-color: red;
		border: 1rpx solid #ECEEF5;
		margin: 12rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items:center;
		flex-direction:column;
		text-align: center;
	}
</style>